<template>
  <div>
    <Header :isGoBack="false">
      <!-- <template v-slot:left>
        <span>单词速记王 <i class="el-icon-arrow-right"></i> 阅读理解</span>
      </template> -->
      <template v-slot:right>
        <div class="btn" @click="goStudyIndex">返回首页</div>
      </template>
    </Header>
    <div class="study-center read-center w1200">
      <div class="study-conatiner mt30 flex-space-be">
        <div class="intelligent-study study-item mr20" id="step4">
          <div class="intelligent-study-header study-item-header">
            <span>第三阶段：阅读理解</span>
          </div>
          <div
            class="intelligent-study-container read-study-none"
            v-if="
              readCenterData2.mode_list &&
                readCenterData2.mode_list.length == 0 &&
                readCenterData5.mode_list &&
                readCenterData5.mode_list.length == 0
            "
          >
            该课程暂无阅读题
          </div>
          <div v-else class="intelligent-study-container flex-space-be">
            <div
              class="
                intelligent-study-left
                mr20
                study-cotainer
                intelligent-study-item
              "
              id="step5"
            >
              <div
                class="
                  study-cotainer-title
                  intelligent-item-header
                  flex-space-be
                "
              >
                <el-tabs v-model="questionType">
                  <el-tab-pane
                    label="阅读理解"
                    name="2"
                    v-if="
                      readCenterData2.mode_list &&
                        readCenterData2.mode_list.length > 0
                    "
                  >
                    <ul class="study-unit-list">
                      <li
                        v-for="item in readCenterData2.mode_list"
                        :key="item.id"
                        :class="checkedType == item.id ? 'checked-unit' : ''"
                        @click="checkType(item)"
                        :ref="'type2-' + item.id"
                      >
                        <h5>{{ item.name }}</h5>
                        <div class="study-schedule">
                          <span
                            class="schedule-icon my_progress"
                            :class="
                              !item.intelligent_mode.progress
                                ? 'study-nolearn'
                                : 'study-learning'
                            "
                          >
                            <el-progress
                              v-if="
                                item.intelligent_mode.progress &&
                                  item.intelligent_mode.total_progress
                              "
                              :show-text="false"
                              type="circle"
                              :percentage="
                                Math.min(
                                  parseInt(
                                    (item.intelligent_mode.progress /
                                      item.intelligent_mode.total_progress) *
                                      100
                                  ),
                                  100
                                )
                              "
                              :color="$store.getters.color_main"
                              :width="12"
                              :height="12"
                              :stroke-width="2"
                            ></el-progress>
                          </span>
                        </div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane
                    label="完形填空"
                    name="5"
                    v-if="
                      readCenterData5.mode_list &&
                        readCenterData5.mode_list.length > 0
                    "
                  >
                    <ul class="study-unit-list">
                      <li
                        v-for="item in readCenterData5.mode_list"
                        :key="item.id"
                        :class="checkedType == item.id ? 'checked-unit' : ''"
                        :ref="'type5-' + item.id"
                        @click="checkType(item)"
                      >
                        <h5>{{ item.name }}</h5>
                        <div class="study-schedule">
                          <span
                            class="schedule-icon my_progress"
                            :class="
                              !item.intelligent_mode.progress
                                ? 'study-nolearn'
                                : 'study-learning'
                            "
                          >
                            <el-progress
                              v-if="
                                item.intelligent_mode.progress &&
                                  item.intelligent_mode.total_progress
                              "
                              :show-text="false"
                              type="circle"
                              :percentage="
                                Math.min(
                                  parseInt(
                                    (item.intelligent_mode.progress /
                                      item.intelligent_mode.total_progress) *
                                      100
                                  ),
                                  100
                                )
                              "
                              :color="$store.getters.color_main"
                              :width="12"
                              :height="12"
                              :stroke-width="2"
                            ></el-progress>
                          </span>
                        </div>
                      </li>
                    </ul>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>

            <div
              class="
                intelligent-study-right
                study-cotainer
                intelligent-study-item
              "
            >
              <div class="study-cotainer-title intelligent-item-header">
                <span>
                  <span>
                    {{ this.$store.getters.questionTypeObj[questionType] }} -
                    {{ testDataInfo && testDataInfo.name }}
                  </span>
                </span>
                <span
                  class="fr mr10 click click-btn-test"
                  @click="goReadTestList"
                >
                  我的试题
                </span>
              </div>
              <div v-if="testDataInfo" class="intelligent-right-conatin">
                <div class="word-study">
                  <div class="word-study-item">
                    <div
                      class="study-item big-study-item mr30"
                      :class="[
                        testDataInfo.intelligent_mode.progress >=
                        testDataInfo.intelligent_mode.total_progress
                          ? 'study-border'
                          : '',
                        $store.getters.isTeacher ? 'not-click' : 'click',
                      ]"
                      @click="goIntelligentTrain"
                    >
                      <div class="study-item-progress">
                        <div
                          v-if="
                            testDataInfo.intelligent_mode.progress >=
                              testDataInfo.intelligent_mode.total_progress
                          "
                          class="challenge challenge-right"
                          :style="'width: 120px; height: 120px'"
                        >
                          <img src="../../../assets/img/right-b.png" alt="" />
                        </div>
                        <el-progress
                          v-if="
                            testDataInfo.intelligent_mode.progress <
                              testDataInfo.intelligent_mode.total_progress
                          "
                          :width="120"
                          :height="120"
                          type="circle"
                          :percentage="
                            Math.min(
                              parseInt(
                                (testDataInfo.intelligent_mode.progress /
                                  testDataInfo.intelligent_mode
                                    .total_progress) *
                                  100
                              ),
                              100
                            )
                          "
                          :color="$store.getters.color_main"
                          class="red-text green-text"
                          :format="formatProgress(testDataInfo)"
                        ></el-progress>
                      </div>
                      <div class="study-item-name">智能训练</div>
                      <p
                        class="study-item-notice"
                        v-if="
                          testDataInfo.intelligent_mode.correct_rate ||
                            testDataInfo.intelligent_mode.correct_rate == 0
                        "
                      >
                        正确率：
                        <span
                          >{{ testDataInfo.intelligent_mode.correct_rate }}%
                        </span>
                      </p>
                      <p v-else class="study-item-notice red-color">
                        正确率：
                        <span>未测</span>
                      </p>
                    </div>
                    <div
                      class="study-item big-study-item"
                      :class="[
                        testDataInfo.level_mode.correct_rate >= 85
                          ? 'study-border'
                          : '',
                        $store.getters.isTeacher ? 'not-click' : 'click',
                      ]"
                      @click="goProficiencyTest"
                    >
                      <div class="study-item-progress">
                        <el-progress
                          :width="120"
                          :height="120"
                          type="circle"
                          :percentage="testDataInfo.level_mode.correct_rate"
                          :color="$store.getters.color_main"
                          class="red-text green-text"
                          :format="formatProgress(testDataInfo, 2)"
                        ></el-progress>
                      </div>
                      <div class="study-item-name">水平测试</div>
                      <p
                        class="study-item-notice"
                        v-if="
                          testDataInfo.level_mode.correct_rate ||
                            testDataInfo.level_mode.correct_rate == 0
                        "
                      >
                        正确率：
                        <span
                          >{{ testDataInfo.level_mode.correct_rate }}%
                        </span>
                      </p>
                      <p v-else class="study-item-notice red-color">
                        正确率：
                        <span>未测</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header";
import { getReadCenterData } from "@/api/index";

export default {
  data() {
    return {
      checkedBookData: {},
      questionType: null,
      checkedType: null,
      statusClass: {
        0: "study-nolearn",
        1: "study-learning",
        2: "study-quick",
        3: "study-nopass",
        4: "study-pass",
        5: "study-ultimate",
      },
      readTypeObj: {},
      questionTypeObj: {},
      readCenterData2: {
        mode_list: [],
      },
      readCenterData5: {
        mode_list: [],
      },
      isCategory: false,
    };
  },
  computed: {
    testDataInfo() {
      if (this.questionType == 2 && this.readCenterData2.mode_list) {
        let data = this.readCenterData2.mode_list.filter((item) => {
          return item.id == this.checkedType;
        });
        if (data.length > 0) {
          return data[0];
        }
      } else if (this.questionType == 5 && this.readCenterData5.mode_list) {
        let data = this.readCenterData5.mode_list.filter((item) => {
          return item.id == this.checkedType;
        });
        if (data.length > 0) {
          return data[0];
        }
      }
      return null;
    },
  },
  methods: {
    goReadTestList() {
      this.$router.push({
        name: "readTestList",
      });
    },
    goStudyIndex() {
      this.$router.push({
        name: "studyIndex",
      });
    },
    goIntelligentTrain() {
      if (this.$store.getters.isTeacher) {
        return;
      }
      this.$router.push({
        name: "intelligentTrain",
        query: {
          questionType: this.questionType,
          checkedType: this.checkedType,
          isCategory: Number(this.isCategory),
        },
      });
    },
    goProficiencyTest() {
      if (this.$store.getters.isTeacher) {
        return;
      }
      this.$router.push({
        name: "proficiencyTest",
        query: {
          questionType: this.questionType,
          checkedType: this.checkedType,
          isCategory: Number(this.isCategory),
        },
      });
    },
    checkType(data) {
      this.checkedType = data.id;
    },
    formatProgress(data, type) {
      return function() {
        if (type == 2) {
          if (
            data &&
            (data.level_mode.correct_rate || data.level_mode.correct_rate == 0)
          ) {
            return `${data.level_mode.correct_rate}分`;
          } else {
            return "未测";
          }
        } else {
          if (data) {
            return `${data.intelligent_mode.progress}/${data.intelligent_mode.total_progress}`;
          } else {
            return "";
          }
        }
      };
    },
    getReadCenterData2() {
      return new Promise((reslove, reject) => {
        let data = {
          bookId: this.checkedBookData.book_id,
          articleQuestionType: 2,
        };
        getReadCenterData(data)
          .then((res) => {
            if (res.code == 200) {
              if (this.isCategory) {
                res.data.mode_list = res.data.category_mode_list.map((item) => {
                  item.id = item.category;
                  item.name = this.$store.getters.readTypeObj[item.category];
                  return item;
                });
              } else {
                res.data.mode_list = res.data.unit_mode_list.map((item) => {
                  item.id = item.unit_id;
                  item.name = item.unit_name;
                  return item;
                });
              }
              this.readCenterData2 = res.data;
            }
            reslove(res);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    getReadCenterData5() {
      return new Promise((reslove, reject) => {
        let data = {
          bookId: this.checkedBookData.book_id,
          articleQuestionType: 5,
        };
        getReadCenterData(data)
          .then((res) => {
            if (res.code == 200) {
              if (this.isCategory) {
                res.data.mode_list = res.data.category_mode_list.map((item) => {
                  item.id = item.category;
                  item.name = this.$store.getters.readTypeObj[item.category];
                  return item;
                });
              } else {
                res.data.mode_list = res.data.unit_mode_list.map((item) => {
                  item.id = item.unit_id;
                  item.name = item.unit_name;
                  return item;
                });
              }
              this.readCenterData5 = res.data;
            }
            reslove(res);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    initType() {
      Promise.all([this.getReadCenterData2(), this.getReadCenterData5()]).then(
        () => {
          this.checkedType = this.$route.query.checkedType
            ? String(this.$route.query.checkedType)
            : null;
          if (this.$route.query.questionType) {
            if (
              this.$route.query.questionType == 2 &&
              this.readCenterData2.mode_list &&
              this.readCenterData2.mode_list.length > 0
            ) {
              this.questionType = "2";
              return;
            }
            if (
              this.$route.query.questionType == 5 &&
              this.readCenterData5.mode_list &&
              this.readCenterData5.mode_list.length > 0
            ) {
              this.questionType = "5";
              return;
            }
          } else {
            if (
              this.readCenterData2.mode_list &&
              this.readCenterData2.mode_list.length > 0
            ) {
              this.questionType = "2";
              return;
            }
            if (
              this.readCenterData5.mode_list &&
              this.readCenterData5.mode_list.length > 0
            ) {
              this.questionType = "5";
              return;
            }
            this.questionType = null;
          }
        }
      );
    },
  },
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.isCategory =
      this.$store.getters.categoryBook.filter((item) => {
        return item == this.checkedBookData.book_id;
      }).length > 0;
    this.initType();
  },
  beforeDestroy() {},
  mounted() {},
  components: { Header },
  watch: {
    questionType(newType) {
      if (
        newType == 2 &&
        this.readCenterData2.mode_list &&
        this.readCenterData5.mode_list.length > 0
      ) {
        let data = this.readCenterData2.mode_list.filter((item) => {
          return item.id == this.checkedType;
        });
        if (data.length == 0) {
          this.checkedType = this.readCenterData2.mode_list[0].id;
        }
      } else if (
        newType == 5 &&
        this.readCenterData5.mode_list &&
        this.readCenterData5.mode_list.length > 0
      ) {
        let data = this.readCenterData5.mode_list.filter((item) => {
          return item.id == this.checkedType;
        });
        if (data.length == 0) {
          this.checkedType = this.readCenterData5.mode_list[0].id;
        }
      }
      this.$nextTick(() => {
        if (newType == 2 && this.checkedType) {
          this.$refs["type2-" + this.checkedType][0].scrollIntoView();
        } else if (newType == 5 && this.checkedType) {
          this.$refs["type5-" + this.checkedType][0].scrollIntoView();
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.study-item-progress /deep/ .el-progress-circle {
  width: 0.625rem !important;
  height: 0.625rem !important;
}
.study-item-progress /deep/ .el-progress__text {
    font-size: 0.07986109375rem !important;
  }
.study-schedule /deep/ .el-progress-circle {
  width: 0.0625rem !important;
  height: 0.0625rem !important;
  position: relative;
  top: 0;
  svg{
    position: absolute;
    top: 0;
  }
}
</style>
